<template>
  <transition name="fade">
    <div id="notice" v-show="this.$store.getters.noticeflagxdata.ids">
      <!-- 你绝对这段vuex很**？其实不然，我只是为了偷懒才这样写的确实很** -->
      <div class="noticeContentArea">
        <p class="title">公告する</p>
        <div
          v-for="(ind, index) in noticedata"
          :key="index"
          class="noticeContent"
        >
          <div class="ztitlearea">
            <p class="ztitle">{{ ind.name }}</p>
            <p class="zdey">{{ ind.data.dey }}</p>
          </div>
          <p class="contentpP">{{ ind.data.content }}</p>
        </div>
      </div>
      <div class="cancel" @click="cancel">
        <img src="../assets/img/tianming/captain.png" alt="" width="100%" />
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { noticeContent } from "@/api/noticeapi";
export default {
  data() {
    return {
      noticeflag: "",
      noticedata: "",
    };
  },
  methods: {
    // 获取新公告
    noticeContentfun() {
      noticeContent().then((res) => {
        console.log(res);
        this.noticedata = res.data;
      });
    },
    // 取消公告
    cancel() {
      this.noticeflagxfun({ ids: false });
    },
    ...mapGetters(["noticeflagxdata"]),
    ...mapMutations(["noticeflagxfun"]),
  },
  computed: {},
  mounted() {
    console.log(this.noticeflagxdata);
    this.noticeContentfun();
  },
};
</script>

<style lang='less' scoped>
#notice {
  width: 70%;
  height: 9rem;
  background-color: rgb(255, 255, 255);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;

  .noticeContentArea {
    padding: 5%;
    .title {
      text-align: center;
      font-size: 0.6rem;
    }
    .noticeContent {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #111;
      .ztitlearea {
        display: flex;
        align-items: center;
        .ztitle {
          font-size: 0.4rem;
        }
        .zdey {
          font-size: 0.2rem;
          color: #ddd;
          margin-left: 0.1rem;
        }
      }
      .contentpP{
        margin-top: 10px;
      }
    }
  }
  .cancel {
    width: 5%;
    position: absolute;
    top: 5%;
    right: 5%;
  }
}

.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active {
  transition: all 0.8s ease;
}
.fade-leave-active {
  transition: all 0.8s ease;
}
</style>